<template>
  <div>
    <div class="step-bar">
      <el-steps :active="active" finish-status="success">
        <el-step title="未付款" :description="orderBaseInfo.addTime" />
        <el-step title="已付款" :description="orderBaseInfo.payTime" />
        <el-step title="已发货" :description="orderBaseInfo.sendTime" />
        <el-step
          v-if="orderBaseInfo.orderStatus == '8'"
          title="申请退货"
          :description="orderBaseInfo.backTime"
        />
        <el-step
          v-else
          title="已收货"
          :description="orderBaseInfo.receiveTime"
        />
        <el-step title="已关闭" :description="orderBaseInfo.doneTime" />
      </el-steps>
    </div>
    <el-card shadow="never" style="margin: 30px">
      <div slot="header" class="title">
        <span>订单状态</span>
        <svg-icon
          v-if="orderBaseInfo.statusend == '1'"
          class="icon-status"
          icon-class="statusend"
        />
        <svg-icon
          v-if="orderBaseInfo.statusend == '0'"
          class="icon-status"
          icon-class="statusing"
        />
      </div>
      <div>基本信息:</div>
      <div class="basic">
        <el-row>
          <el-col :span="4" :offset="0">
            <div class="basic-on">订单编号</div>
            <div class="basic-under">{{ orderBaseInfo.orderId }}</div>
          </el-col>
          <el-col :span="4" :offset="0">
            <div class="basic-on">用户账号</div>
            <div class="basic-under">{{ orderBaseInfo.username }}</div>
          </el-col>
          <el-col :span="4" :offset="0">
            <div class="basic-on">订单金额</div>
            <div class="basic-under">{{ orderBaseInfo.price }}</div>
          </el-col>
          <el-col :span="4" :offset="0">
            <div class="basic-on">订单数量</div>
            <div class="basic-under">{{ orderBaseInfo.count }}</div>
          </el-col>
          <el-col :span="4" :offset="0">
            <div class="basic-on">订单状态</div>
            <div class="basic-under">
              {{ orderStatusObj[orderBaseInfo.orderStatus] }}
            </div>
          </el-col>
          <el-col :span="4" :offset="0">
            <div class="basic-on">下单时间</div>
            <div class="basic-under">{{ orderBaseInfo.addTime }}</div>
          </el-col>
          <el-col :span="4" :offset="0">
            <div class="basic-on">付款时间</div>
            <div class="basic-under">{{ orderBaseInfo.payTime }}</div>
          </el-col>
          <el-col :span="4" :offset="0">
            <div class="basic-on">发货时间</div>
            <div class="basic-under">{{ orderBaseInfo.sendTime }}</div>
          </el-col>
          <el-col :span="4" :offset="0">
            <div class="basic-on">收货时间</div>
            <div class="basic-under">{{ orderBaseInfo.receiveTime }}</div>
          </el-col>
          <el-col :span="4" :offset="0">
            <div class="basic-on">退单时间</div>
            <div class="basic-under">{{ orderBaseInfo.backTime }}</div>
          </el-col>
          <el-col :span="4" :offset="0">
            <div class="basic-on">结束时间</div>
            <div class="basic-under">{{ orderBaseInfo.endTime }}</div>
          </el-col>
        </el-row>
      </div>
      <div style="margin: 30px 0">收货人信息:</div>
      <div class="userinfo">
        <el-row>
          <el-col :span="6" :offset="0">
            <div class="userinfo-on">用户名</div>
            <div class="userinfo-under">
              {{ userInfo.username }}
            </div>
          </el-col>
          <el-col :span="6" :offset="0">
            <div class="userinfo-on">收货人</div>
            <div class="userinfo-under">
              {{ userInfo.name }}
            </div>
          </el-col>
          <el-col :span="6" :offset="0">
            <div class="userinfo-on">手机号码</div>
            <div class="userinfo-under">
              {{ userInfo.tel }}
            </div>
          </el-col>
          <el-col :span="6" :offset="0">
            <div class="userinfo-on">邮政编码</div>
            <div class="userinfo-under">41000</div>
          </el-col>
          <el-col :span="6" :offset="0">
            <div class="userinfo-on">地市</div>
            <div class="userinfo-under">
              {{ userInfo.cityStr }}
            </div>
          </el-col>
          <el-col :span="6" :offset="0">
            <div class="userinfo-on">详细地址</div>
            <div class="userinfo-under">
              {{ userInfo.cityBak }}
            </div>
          </el-col>
        </el-row>
      </div>
      <div style="margin: 30px 0">商品信息:</div>
      <el-table :data="shoplist" border stripe>
        <el-table-column align="center" type="index" width="50" />

        <el-table-column align="center" label="商品图片" width="150">
          <template slot-scope="scope">
            <img class="img3" :src="scope.row.cover_img" alt="">
          </template>
        </el-table-column>

        <el-table-column align="center" label="商品名称" width="200">
          <template slot-scope="scope">
            {{ scope.row.gname }}
            <p>品牌: {{ scope.row.brandName }} | {{ scope.row.brandEname }}</p>
          </template>
        </el-table-column>
        <el-table-column align="center" label="价格货号" width="200">
          <template slot-scope="scope">
            <p>价格: ¥{{ scope.row.price / 100 }}</p>
            <p>货号: {{ scope.row.sku_code }}</p>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="color_text"
          label="商品型号"
          width="120"
        />

        <el-table-column align="center" label="是否退货" width="200">
          <template slot-scope="scope">
            <p v-if="scope.row.backId">是</p>
            <p v-else>否</p>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="count" label="数量" width="120" />
        <el-table-column align="center" label="小计" width="200">
          <template slot-scope="scope">
            ¥{{ (scope.row.price * scope.row.count) / 100 }}
          </template>
        </el-table-column>
      </el-table>
      <div style="margin: 30px">费用信息:</div>
      <div class="cost">
        <el-row>
          <el-col :span="6" :offset="0">
            <div class="cost-on">商品合计</div>
            <div class="cost-under">¥{{ totalPrice }}</div></el-col>
          <el-col :span="6" :offset="0">
            <div class="cost-on">运费</div>
            <div class="cost-under">0</div></el-col>
          <el-col :span="6" :offset="0">
            <div class="cost-on">订单金额</div>
            <div class="cost-under">¥{{ totalPrice }}</div></el-col>
          <el-col :span="6" :offset="0">
            <div class="cost-on">实付款</div>
            <div class="cost-under">¥{{ totalPrice }}</div></el-col>
        </el-row>
      </div>
      <div style="margin: 30px auto 60px; text-align: center">
        <el-button
          v-if="active == 2"
          type="primary"
          size="default"
          @click="sendDone"
        >已发货</el-button>
        <el-button
          v-if="active == 3"
          type="primary"
          size="default"
        >等待买家收货</el-button>
        <el-button
          v-if="orderBaseInfo.statusend == '0' && active == 4"
          type="primary"
          size="default"
          @click="closeshop"
        >关闭订单</el-button>
        <el-button
          v-if="isAllBak"
          type="primary"
          @click="closeOrderByBack"
        >强制确认收货</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import OrderApi from '@/api/order/index'
export default {
  name: 'Orderdetail',
  data() {
    return {
      orderId: '',
      orderBaseInfo: [],
      userInfo: [],
      shoplist: [],
      orderStatusObj: {
        0: '未付款',
        1: '已付款',
        2: '已发货',
        3: '已收货',
        9: '申请退货'
      }
    }
  },
  computed: {
    totalPrice() {
      var totalPrice = this.shoplist.reduce((a, b) => {
        a += (b.price * b.count) / 100
        return a
      }, 0)
      return totalPrice
    },
    isAllBak() {
      var isAll = false
      for (var i = 0; i < this.shoplist.length; i++) {
        var a = this.shoplist[i]
        if (a.backId) {
          isAll = true
          break
        }
      }
    },
    active() {
      if (this.orderBaseInfo.statusend == '1') {
        return 4
      } else {
        return parseInt(this.orderBaseInfo.orderStatus) + 1
      }
    }
  },
  created() {
    this.orderId = this.$route.params.id
    this.getorderdetail()
    this.getorderUserInfo()
    this.getorderlsit()
  },
  methods: {
    // 商品信息
    getorderdetail() {
      OrderApi.orderdetail({ orderId: this.orderId }).then((res) => {
        console.log(res)
        this.shoplist = res.data
      })
    },
    // 收货人信息
    getorderUserInfo() {
      OrderApi.orderUserInfo({ orderId: this.orderId }).then((res) => {
        this.userInfo = res.data
      })
    },
    getorderlsit() {
      OrderApi.orderlist({ orderId: this.orderId }).then((res) => {
        this.orderBaseInfo = res.data.list[0]
      })
    },
    // 发货
    sendDone() {
      OrderApi.sendDone({ id: this.orderBaseInfo.orderId }).then((res) => {
        if (res.code == 'S') {
          window.location.reload()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 关闭订单
    closeshop() {
      OrderApi.closeOrder({ id: this.orderBaseInfo.orderId }).then((res) => {
        if (res.code == 'S') {
          window.location.reload()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 关闭
    closeOrderByBack() {
      OrderApi.delFocus({ id: this.orderBaseInfo.orderId }).then((res) => {
        if (res.code == 'S') {
          window.location.reload()
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  }
}
</script>
<style scoped  lang='scss'>
.step-bar {
  width: 50%;
  margin: 30px auto;
}
.icon-status {
  font-size: 60px;
}
.title {
  display: flex;
  align-items: center;
}
.basic {
  margin-top: 30px;
  .basic-on {
    background: #f5f7fa;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border: 1px solid #dcdfe6;
  }
  .basic-under {
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid #dcdfe6;
  }
}
.userinfo {
  .userinfo-on {
    background: #f5f7fa;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border: 1px solid #dcdfe6;
  }
  .userinfo-under {
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid #dcdfe6;
  }
}
.cost {
  .cost-on {
    background: #f5f7fa;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border: 1px solid #dcdfe6;
  }
  .cost-under {
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid #dcdfe6;
  }
}
.img3 {
  width: 150px;
  height: 100px;
}
</style>
